<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8"><link rel="icon" href="https://jscdn.com.cn/highcharts/images/favicon.ico">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            /* css 代码  */
        </style>
        <script src="https://code.highcharts.com.cn/jquery/jquery-1.8.3.min.js"></script>
        <script src="https://code.highcharts.com.cn/highstock/highstock.js"></script>
        <script src="https://code.highcharts.com.cn/highcharts/modules/exporting.js"></script>
        <script src="https://code.highcharts.com.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
        <script src="https://code.highcharts.com.cn/highcharts/modules/drag-panes.js"></script>
    </head>
    <body>
        <div id="container" style="min-width:400px;height:400px">图表加载中...</div>
        <script>
            Highcharts.setOptions({
            		lang: {
            				rangeSelectorZoom: ''
            		}
            });
            $.getJSON('https://data.jianshukeji.com/stock/history/000001', function (data) {
            		if(data.code !== 1) {
            				alert('读取股票数据失败！');
            				return false;
            		}
            		data = data.data;
            		var ohlc = [],
            				volume = [],
            				dataLength = data.length,
            				// set the allowed units for data grouping
            				groupingUnits = [[
            						'week',                         // unit name
            						[1]                             // allowed multiples
            				], [
            						'month',
            						[1, 2, 3, 4, 6]
            				]],
            				i = 0;
            		for (i; i < dataLength; i += 1) {
            				ohlc.push([
            						data[i][0], // the date
            						data[i][1], // open
            						data[i][2], // high
            						data[i][3], // low
            						data[i][4] // close
            				]);
            				volume.push([
            						data[i][0], // the date
            						data[i][5] // the volume
            				]);
            		}
            		// create the chart
            		var chart = Highcharts.stockChart('container', {
            				rangeSelector: {
            						selected: 1,
            						inputDateFormat: '%Y-%m-%d'
            				},
            				title: {
            						text: '平安银行历史股价'
            				},
            				xAxis: {
            						dateTimeLabelFormats: {
            								millisecond: '%H:%M:%S.%L',
            								second: '%H:%M:%S',
            								minute: '%H:%M',
            								hour: '%H:%M',
            								day: '%m-%d',
            								week: '%m-%d',
            								month: '%y-%m',
            								year: '%Y'
            						}
            				},
            				tooltip: {
            						split: false,
            						shared: true,
            				},
            				yAxis: [{
            						labels: {
            								align: 'right',
            								x: -3
            						},
            						title: {
            								text: '股价'
            						},
            						height: '65%',
            						resize: {
            								enabled: true
            						},
            						lineWidth: 2
            				}, {
            						labels: {
            								align: 'right',
            								x: -3
            						},
            						title: {
            								text: '成交量'
            						},
            						top: '65%',
            						height: '35%',
            						offset: 0,
            						lineWidth: 2
            				}],
            				series: [{
            						type: 'candlestick',
            						name: '平安银行',
            						color: 'green',
            						lineColor: 'green',
            						upColor: 'red',
            						upLineColor: 'red',
            						tooltip: {
            						},
            						navigatorOptions: {
            								color: Highcharts.getOptions().colors[0]
            						},
            						data: ohlc,
            						dataGrouping: {
            								units: groupingUnits
            						},
            						id: 'sz'
            				},{
            						type: 'column',
            						data: volume,
            						yAxis: 1,
            						dataGrouping: {
            								units: groupingUnits
            						}
            				}]
            		});
            }); 
        </script>
    </body>
</html>